<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @mouseover="activeindex = index" @mouseout="activeindex = null"
        :class="{ active: index === activeindex }">{{ item.name }}
        <p class="notshow" :class="{ show: index === activeindex }" v-for="(item) in item.products" :key="item.name">
          {{ item.name }} ----- {{ item.price }}
        </p>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: '数码',
          products: [
            {
              id: 1,
              name: 'Macbook Pro 2022',
              price: 998
            },
            {
              id: 2,
              name: 'iphone 14 Pro Mini',
              price: 588
            },
            {
              id: 3,
              name: 'ipod',
              price: 8
            }
          ]
        },
        {
          id: 2,
          name: '服饰',
          products: [
            {
              id: 4,
              name: '精神小伙爆款旺仔牛奶全身套',
              price: 99
            },
            {
              id: 5,
              name: '潮牌豆豆鞋',
              price: 59
            },
            {
              id: 6,
              name: '牌牌琦电动车',
              price: 1999
            }
          ]
        },
        {
          id: 3,
          name: '其他',
          products: [
            {
              id: 7,
              name: '一罐空气',
              price: 0.5
            },
            {
              id: 8,
              name: '老头环',
              price: 298
            },
            {
              id: 9,
              name: '猫抓板',
              price: 10
            }
          ]
        }
      ],
      activeindex: ""
    }
  },
  methods: {

  },
}
</script>

<style>
ul {
  padding: 0;
  margin: 0 auto;
  width: 1000px;
  height: 30px;
  line-height: 30px;
  display: flex;
  text-align: center;
  list-style: none;
  justify-content: space-between;
  border: 1px solid;
}

li {
  width: 300px;
}


.active {
  background-color: brown;
}

.notshow {
  display: none;
}

.show {
  display: block;
}
</style>